<template>
  <div>
    <div class="box1">
        <el-space>
        <el-select placeholder="请选择用户状态" v-model="status">
          <el-option label="冻结" value="0" />
          <el-option label="激活" value="1" />
          <el-option label="全部" value=""/>
        </el-select>
        <el-select placeholder="请选择会员等级" v-model="level">
          <el-option label="普通会员" value="0" />
          <el-option label="vip会员"  value="1" />
          <el-option label="全部" value="" />
        </el-select>
        <el-select placeholder="选择用户区别" v-model="gender">
          <el-option label="女" value="1" />
          <el-option label="男" value="2" />
          <el-option label="全部" value="" />
        </el-select>
        <el-input v-model.trim="id" placeholder="请输入用户ID" />
        <el-input v-model.trim="nickname" placeholder="请输入昵称" />
        <el-button type="primary" class="iconfont icon-sousuo" @click="member()"
          >查找</el-button
        >
    </el-space>
    </div>
    <el-table :data="members" border style="width: 100%">
      <el-table-column prop="id" label="用户ID" align="center" width="80px"/>
      <el-table-column prop="nickname" label="名称" align="center" width="120px" />
      <el-table-column prop="phone" label="手机号码" align="center" />
      <el-table-column prop="gender" label="性别" align="center" width="120px">
        <template #default="scope">
          <el-tag>
            {{scope.row.gender==1?'女':'男'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="会员等级" align="center">
        <template #default="scope">
          <el-tag>
            {{scope.row.level==0?'普通会员':'VIP会员'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日" align="center" :formatter="birthdays" />
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-tag>
            {{scope.row.status==0?'冻结':'激活'}}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtLastLogin" label="上次登录时间" align="center" :formatter="dateFormat" width="160px" />
      <el-table-column prop="lastLoginIp" label="上次登录IP" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button
            :type="scope.row.status?'danger':'primary'"
            size="small"
            @click="handleEdit(scope.row)"
            >{{scope.row.status?'激活':'冻结'}}</el-button
          >
          <el-button
            type="primary"
            size="small"
            @click="handleDelete(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
    <el-dialog v-model="dialogVisible" title="编辑" width="30%" >
      <el-form status-icon :rules="rules" label-width="100px" :model="show" >
        <el-form-item label="隐藏的ID" prop="id" >
          <el-input v-model="show.id" type="text" autocomplete="off" disabled />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model.trim="show.nickname" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone">
          <el-input v-model.trim="show.phone" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model.trim="show.password" type="password" />
        </el-form-item>
        <el-form-item label="用户性别">
            <el-select placeholder="选择用户区别" v-model="show.gender">
            <el-option label="女" :value="1" />
            <el-option label="男" :value="2" />
            </el-select>
        </el-form-item>
        <el-form-item label="用户等级">
            <el-select placeholder="请选择会员等级" v-model="show.level">
            <el-option label="普通会员" :value="0" />
            <el-option label="vip会员" :value="1" />
            </el-select>
        </el-form-item>
        <el-form-item label="用户状态">
            <el-select placeholder="请选择用户状态" v-model="show.status">
            <el-option label="冻结" :value="0" />
            <el-option label="激活" :value="1" />
            </el-select>
        </el-form-item>
        

      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="sure()">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <PaginAtion
      class="dins"
      v-bind="paging"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
    </PaginAtion>
  </div>
</template>
<script>
  import moment from 'moment'
  import PaginAtion from "@/Subassembly/PaginAtion";
  import http from "@/http";
  import { ElMessage} from "element-plus";
  export default {
    components: {
      PaginAtion,
    },
    data() {
      return {
        id: "",
        nickname: "",
        level: null,
        gender: null,
        status: null,
        dialogVisible:false,
        members: [],
        paging: {
          page: 1, //默认第一页
          limit: 10, //显示一行几页
          total: "", //总页
        },
        //修改赋值
        show:{
            id:"",  //id
            phone:"", //手机号
            nickname: "", //昵称
            gender: "", //性别
            status: "", //状态
            level: "",  //等级
            password:"" //密码
        }
      };
    },
    created() {
      this.member();
    },
    methods: {
        //渲染数据
      member() {
        let data = {
          _gp: "admin.user",
          _mt: "list",
          id: this.id,
          level: this.level,
          gender: this.gender,
          status: this.status,
          pageNo:this.paging.page,
          limit:this.paging.limit
        };
        http.post(data).then((res) => {
          console.log(res);
          if(200==res.errno){
              this.paging.total = res.data.total;
              this.members = res.data.items
          }
        });
      },
      //点击编辑赋值
      handleDelete(index,row){
          console.log(row);
          this.dialogVisible = true
          this.show.id = row.id
          this.show.nickname = row.nickname
          this.show.phone = row.phone
          this.show.gender = row.gender
          this.show.level = row.level
          this.show.status = row.status
          this.show.password = row.password
      },
      //点击编辑的时候
      handleEdit(row){          
          console.log(row);
          let jihuo = {
              _gp:"admin.user",
              _mt:"editStatus",
              userId:row.id,
              status:row.status?'0':'1'
          }
          http.post(jihuo).then((res)=>{
              console.log(res);
              if(200==res.errno){
                  ElMessage.success("修改成功")
                  this.member()
              }
          })
      },
      //编辑确定事件
      sure(){
        if (this.show.nickname == "") {
          return ElMessage.error("用户昵称不能为空");
        } else if (this.show.phone == "") {
          return ElMessage.error("手机号不能为空");
        } else if (this.show.password == "") {
          return ElMessage.error("密码不能为空");
        }
        var myreg = /^1\d{10}$/;
        if (!myreg.test(this.show.phone)) {
          return ElMessage.error("手机格式要11位！");
        }     
          let Modifies = {
              _gp:"admin.user",
              _mt:"edit",
              user:JSON.stringify(this.show)
          }
          http.post(Modifies).then((res)=>{
            //   console.log(res);
            if(200==res.errno){
                ElMessage.success("修改成功")
                this.dialogVisible = false
                this.member()
            }
          })
      },
    //时间戳
    dateFormat(row, column) {
      var date = row[column.property];
      return moment(date).format("MM月DD日HH时mm分");
    },
     birthdays(row, column) {
      var date = row[column.property];
      return moment(date).format("YYYY年MM月DD日");
    },
      handleSizeChange(val) {
        this.paging.limit = val;
        this.member();
      },
      handleCurrentChange(val) {
        this.paging.page = val;
        this.member();
      },
    },
  };
</script>
<style lang="less" scoped>
   .box1{
       .el-input{
           width: 160px;
           height: 40px;
       }
       /deep/ .el-input__inner{
        width: 160px;
    }
    .el-space{
        padding: 8px 8px;
    }
   }
   /deep/ .el-pagination{
       margin-top: 20px;
   }
</style>
